<template>
  <el-form :model="fromDate" label-width="auto" style="max-width: 600px">
    <el-form-item label="商品类别">
      <el-input v-model="fromDate.category" />
    </el-form-item>
    <el-form-item label="商品名">
      <el-input v-model="fromDate.proname" />
    </el-form-item>
    <el-form-item label="商品图片">
      <el-upload
        v-model:file-list="fileList"
        action="http://localhost:3001/admin/file/upload"
        name="img"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="是否上架">
      <el-switch v-model="fromDate.issale" />
    </el-form-item>
    <el-form-item label="商品价格">
      <el-input v-model="fromDate.originprice" />
    </el-form-item>
    <el-form-item label="商品库存">
      <el-input v-model="fromDate.stock" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { productAddRequest, productListRequest } from '../api/product'
const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

let fromDate = reactive({
  category: '',
  proname: '',
  issale: '',
  originprice: '',
  stock: '',
  imgs: [],
})

function getData() {
  productListRequest().then((r) => {
    fromDate.value = r.data.data
    console.log(fromDate.value)
  })
}
getData()

//发布按钮
function onSubmit() {
  fromDate.imgs = fileList.value.map((v) => {
    return v.response.fileUrl
  })
  productAddRequest(fromDate).then((r) => {
    console.log(r.data)
  })
  ElMessage.success('发布成功')
}
const reset = () => {
  fromDate.value = {}
  console.log('reset!')
}
//上传图片

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
</script>
